<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>QSKJ_LOCAL</title>
    <script type="text/javascript" src="/Public/Build/Cesium/Cesium.js"></script>
    <script src="/Public/js/jquery-3.7.1.min.js"></script>
    <script src="/Public/js/utilsForCesium.js"></script>
    <link rel="stylesheet" href="/Public/Build/Cesium/Widgets/widgets.css">
    <style>
        .camera-info {
            position: absolute;
            display: flex;
        }

        .camera-info>span {
            margin-left: 20px;
            color: white;
            font-size: 20px;
            font-weight: 800;
            z-index: 450;
        }
    </style>
</head>

<body>
    <div id="cesiumContainer">
        <div class="camera-info">
            <span id="c-heading"></span>
            <span id="c-pitch"></span>
            <span id="c-jd"></span>
            <span id="c-wd"></span>
            <span id="c-height"></span>
        </div>
    </div>
    <script>
        Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0MjczNDgzMy1hYzE1LTRjNWYtODZhMS01MjZkNWRiMDc2MmUiLCJpZCI6ODIxMzAsImlhdCI6MTY0NDU0ODc0M30.LpGXXWsbQXucV5MTeC2g8BCAQWiZp612gosWcK-7ocE';

        const viewer = new Cesium.Viewer('cesiumContainer', {
            terrain: Cesium.Terrain.fromWorldTerrain(),
        });

        viewer.camera.changed.addEventListener(() => {
            let heading = Cesium.Math.toDegrees(viewer.camera.heading).toFixed(2)
            let pitch = Cesium.Math.toDegrees(viewer.camera.pitch).toFixed(2)
            let viewHeight = viewer.camera.positionCartographic.height.toFixed(2)
            var positionCartographic = Cesium.Cartographic.fromCartesian(viewer.camera.position);
            var longitude = Cesium.Math.toDegrees(positionCartographic.longitude).toFixed(2);
            var latitude = Cesium.Math.toDegrees(positionCartographic.latitude).toFixed(2);
            var height = positionCartographic.height.toFixed(2);
            $("#c-heading").text(`heading:${heading}`)
            $("#c-pitch").text(`pitch:${pitch}`)
            $("#c-jd").text(`视角经度:${longitude}`)
            $("#c-wd").text(`视角纬度:${latitude}`)
            $("#c-height").text(`视角高度:${height}`)

        })
        // viewer.scene.globe.show = false;

         $.get("/Public/data/bf/nature_reserve.json", {}, function (data) {
            data.features.forEach(feature => {
                 const pls = feature.geometry.rings[0]
                 var pts = []
                 pls.forEach(pl => {
                    pts.push(pl[0])
                    pts.push(pl[1])
                    pts.push(5000.0)
                 })
                const wall = new Cesium.WallGeometry({
                    positions: Cesium.Cartesian3.fromDegreesArrayHeights(pts)
                 })
                const geometry = Cesium.WallGeometry.createGeometry(wall);
                const instance = new Cesium.GeometryInstance({
                    geometry: geometry,
                })

                const materialAppearance = new Cesium.MaterialAppearance({
                material: new Cesium.Material({
                    fabric: {
                        type: 'Color',
                        uniforms: {
                            color1: new Cesium.Color(1, 0, 0, 1),
                            color2: new Cesium.Color(0, 1, 0, 1),
                            color3: new Cesium.Color(0, 0, 1, 1),
                            color4: new Cesium.Color(1, 1, 0, 1),
                            color5: new Cesium.Color(1, 1, 1, 1)
                        },
                        // source: shaderDynamicsMultiRings4
                        source: shaderDynamicsMultiRings4
                    }
                }),
                faceForward: true
            });

            viewer.scene.groundPrimitives.add(new Cesium.Primitive({
                    geometryInstances: instance,
                    appearance: materialAppearance

            }));

                viewer.camera.setView({
                    destination: Cesium.Cartesian3.fromDegrees(
                        102.68, 29.73,
                        39929.52
                    ),
                    orientation: {
                        heading: Cesium.Math.toRadians(347.29),
                        pitch: Cesium.Math.toRadians(-39.84),
                        roll: 0.0,
                    },
                });
            })
         })
        // $.get("/Public/data/nature_reserve.json", {}, function (data) {
            
        //     data.features.forEach(feature => {
        //         const pls = feature.geometry.rings[0]
        //         var pts = []
        //         // //直接指定墙体高度
        //         // pls.forEach(pl => {
        //         //     pts.push(pl[0])
        //         //     pts.push(pl[1])
        //         //     pts.push(5000.0)
        //         // })
        //         // const wall = new Cesium.WallGeometry({
        //         //     positions: Cesium.Cartesian3.fromDegreesArrayHeights(pts),
        //         // })

        //         //设置最大最小墙高
        //         pls.forEach(pl => {
        //             pts.push(pl[0])
        //             pts.push(pl[1])
        //         })
        //         const wall = new Cesium.WallGeometry({
        //             positions: Cesium.Cartesian3.fromDegreesArray(pts),
        //             maximumHeights: new Array(pts.length).fill(5000),
        //             minimunHeights: new Array(pts.length).fill(0),
        //         })

        //         const geometry = Cesium.WallGeometry.createGeometry(wall);

        //         const instance = new Cesium.GeometryInstance({
        //             geometry: geometry,

        //         })
                    
        //         const materialAppearance = new Cesium.MaterialAppearance({
        //             material: new Cesium.Material({
        //                 fabric: {
        //                     type: 'Color',
        //                     uniforms: {
        //                         ringcolor: new Cesium.Color(1, 0, 0, 1),
        //                         wallcolor: new Cesium.Color(0, 1, 0, 1),
        //                     },
        //                     source: shaderDynamicsMultiRings4
        //                 }
        //             }),
        //             faceForward: true
        //         });
               
        //         // const materialAppearance = new Cesium.MaterialAppearance({
        //         //     material: new Cesium.Material({
        //         //         fabric: {
        //         //             type: 'Color',
        //         //             uniforms: {
        //         //                 color1: new Cesium.Color(1, 0, 0, 1),
        //         //                 color2: new Cesium.Color(0, 1, 0, 1),
        //         //                 color3: new Cesium.Color(0, 0, 1, 1),
        //         //                 color4: new Cesium.Color(1, 1, 0, 1),
        //         //                 color5: new Cesium.Color(1, 1, 1, 1)
        //         //             },
        //         //             // source: shaderDynamicsMultiRings4
        //         //             source: shaderDynamicsMultiRings3
        //         //         }
        //         //     }),
        //         //     faceForward: true
        //         // });

        //         // const materialAppearance = new Cesium.MaterialAppearance({
        //         //     material: new Cesium.Material({
        //         //         fabric: {
        //         //             type: 'Color',
        //         //             uniforms: {
        //         //                 color: Cesium.Color.fromAlpha(Cesium.Color.MEDIUMTURQUOISE,0.2)
        //         //             },
        //         //             source: shaderSourceUTB
        //         //         }
        //         //     }),
        //         //     faceForward: true
        //         // });
                
        //         viewer.scene.groundPrimitives.add(new Cesium.Primitive({
        //             geometryInstances: instance,
        //             appearance: materialAppearance

        //         }));

        //         viewer.camera.setView({
        //             destination: Cesium.Cartesian3.fromDegrees(
        //                 102.68, 29.73,
        //                 39929.52
        //             ),
        //             orientation: {
        //                 heading: Cesium.Math.toRadians(347.29),
        //                 pitch: Cesium.Math.toRadians(-39.84),
        //                 roll: 0.0,
        //             },
        //         });

        //     })
        // })
    </script>
    </div>
</body>

</html>